<!-- 设备状态 -->
<script lang="ts" setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  initEcharts()
})

const initEcharts = () => {
  const myChart = echarts.init(document.getElementById('main'))

  // 指定图表的配置项和数据
  const option = {
    xAxis: {
      show: false,
      max: 1200,
    },
    yAxis: {
      show: false,
      data: ['Shirts'],
    },
    series: [
      {
        name: 'sales',
        type: 'bar',
        data: [500],
        showBackground: true,
        backgroundStyle: {
          color: '#000',
        },
        itemStyle: {
          color: 'red',
          borderWidth: 100,
        },
        barWidth: 10,
      },
      {
        name: 'list1',
        type: 'bar',
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
</script>

<template>
  <div class="equipement-content">
    <div>设备状态</div>
    <div>
      <div class="second-content">
        <div class="second-one">
          <div class="img-content"></div>
          <div>
            <div>
              <span class="one-color"></span>
              <span>总设备</span>
            </div>
            <div>
              <span class="two-color"></span>
              <span>离线设备</span>
            </div>
          </div>
        </div>
        <div class="second-one">
          <div class="img-content"></div>
          <div>
            <div>
              <span class="one-color"></span>
              <span>总设备</span>
            </div>
            <div>
              <span class="two-color"></span>
              <span>离线设备</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div id="main" style="width: 50%; height: 100%"></div>
    </div>
  </div>
</template>


<style scoped lang="scss">
.equipement-content {
  padding: 24px 20px 0 20px;
  color: #fff;
  margin-top: 35px;
  margin-left: 16px;
  margin-bottom: 5px;
  width: 503px;
  height: 224px;
  background-color: #0f1235;
  .second-content {
    padding: 0 11px 0 11px;
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    .second-one {
      display: flex;
      justify-content: space-between;
      .one-color {
        margin: 0 10px;
        width: 20px;
        height: 10px;
        background-color: #42d392;
        display: inline-block;
      }
      .two-color {
        margin: 0 10px;
        width: 20px;
        height: 10px;
        background-color: #f56c6c;
        display: inline-block;
      }
    }
  }
  .img-content {
    width: 79px;
    height: 79px;
    background: url('../../assets/images/bh1.png') no-repeat center / cover;
  }
}
</style>